<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4-1 变幻菜单展示及制作（一）......</title>
    <script src="../jquery.min.js" type="text/javascript"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #nav {
            background: #eeee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
            border-bottom: 8px solid #dc4e1b;
            overflow: hidden; /* 清除浮动 */
        }

        ul li {
            list-style: none;
            float: left;
            /*width: 90px;*/ /*  固定宽度 字数多以后 会换行 */
            /*   padding: 0 10px; *//* 解决方案 不给固定宽度 给边距*/

            line-height: 40px; /*垂直居中*/
            text-align: center; /* 水平居中 */

            /*position: relative;*/
        }

        /**/
        a {
            text-decoration: none;
            color: black;
            padding: 0 10px;
        }

        a:hover {
            color: #fff;
            background: red;
            display: block;
        }

        ul li ul li {
            /*1 取消浮动  */
            float: none;
            background: #eee;
            margin-top: 2px;
        }

        ul li ul {
            /* 相对于父级别进行绝对定位  防止二级菜单影响 到1级菜单的宽度 */
            /*position: absolute;*/
            left: 0;
            top: 40px;
            display: none;

        }

        ul li ul li a:hover {
            background: #06f;
        }

        .clearfix {
            overflow: hidden;
            _zoom: 1;
        }

        #nav ul li a span {
            display: none;
        }

        #nav ul li:hover a span {
            display: block;

        }

        #nav ul li:hover {
            margin-top: -40px;

        }


    </style>
</head>
<body>

<div id="nav">
    <ul>
        <li><a href="#">首页 <span>English</span></a>

        </li>
        <li>
            <a href="#">课程大厅 <span>English</span></a>

        </li>
        <li>
            <a href="#">学习中心<span>English</span></a>
        </li>
        <li>
            <a href="#">关于我们 <span>English</span></a>

        </li>
    </ul>


</div>


</body>
</html>